<template>
    <div>
        <ul class="list">
          <div :style="bgWhitestyle"></div>
            <li v-for="(item,index) in result" :key="index" @click="toggle(index)" :class="{bgGray:index!=liIndex,bgWhite:index==liIndex, lihover:lihover}" :style="{width:liLength+'px'}" @mouseover="mouseover" @mouseout="mouseout">
                <img :src="item.logo">
            </li>
        </ul>
        <div class="content-warp">
            <div class="content2 " >
                <p class="commonP"><span class="commonSpan resource"></span>资源介绍</p>
                <ul>
                    <li v-for="(item,index) in arr" :key="index" :class="{hengxiang:arr.length>3,shuxiang:arr.length<=3}">
                        <p class="commonP1"><img src="../../assets/img/APP矩阵详情页/切图通用/13.png">
                            <span>{{item}}</span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="content2 content-style">
                <p class="commonP"><span class="commonSpan advantage"></span>产品优势</p>
                <ul>
                    <li v-for="(item,index) in arr1" :key="index" :class="{shuxiang:arr1.length!==0}">
                        <p class="commonP1"><img src="../../assets/img/APP矩阵详情页/切图通用/13.png">
                            <span>{{item}}</span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="content2">
                <p class="commonP"><span class="commonSpan show-presentation"></span>展现形式</p>
                <ul class="content3">
                    <li v-for="(item,index) in arr2" :key="index">
                        <img :src="item" alt="">
                        <p>{{arr3[index]}}</p>
                    </li>
                </ul>
            </div>
            <div class="container4">
                <p class="commonP"><span class="commonSpan sale-presentation"></span>售卖方式</p>
                <p><img src="../../assets/img/APP矩阵详情页/切图通用/13.png">
                    <span>{{result1.sellingWay}}</span>
                </p>
            </div>
            <div class="container5">
                <button @click="$router.push({path:'/view2/hotMediaNav2',query:{type:'app'}})">点击查看更多APP</button>
            </div>
        </div>
    </div>
</template>
<script>
const img1 = require("../../assets/img/APP矩阵详情页/切图通用/3.png");
const img2 = require("../../assets/img/APP矩阵详情页/切图通用/4.png");
const img3 = require("../../assets/img/APP矩阵详情页/切图通用/5.png");
const img4 = require("../../assets/img/APP矩阵详情页/切图通用/6.png");
const img5 = require("../../assets/img/APP矩阵详情页/切图通用/7.png");
const img6 = require("../../assets/img/APP矩阵详情页/切图通用/8.png");
export default {
  name: "xiaoguo",
  data() {
    return {
      liIndex: 0,
      type: "",
      result1: "",
      id: "",
      arr: [],
      result: "",
      arr1: [],
      arr2: [],
      arr3: [],
      liLength: "",
       bgWhitestyle: {
        boxShadow: '2px 2px 17px #ebebeb',
        position: 'absolute',
        marginTop: '-15px',
        width: '200px',
        height: '180px',
        left:'200',
        border:'15px solid #fff',
        zIndex:1
      },
      lihover : false
    };
  },
  methods: {
    async toggle(index) {
      //  this.bgWhitestyle.left=(document.body.clientWidth-1200)/2+200*index+'px';
      this.bgWhitestyle.left=(document.body.clientWidth-1200)/2+this.liLength*index+'px';
      this.liIndex = index;
      this.bgWhitestyle.width = this.liLength + "px";
      this.bgWhitestyle.left =
        (document.body.clientWidth - 1200) / 2 +
        this.liLength * this.liIndex +
        "px";
      this.id = this.result[index].id;
      await this.$ajax
        .post(
          this.Ipurl + "advertisingInformation/queryById" + "?id=" + this.id
        )
        .then(res => {
          this.result1 = res.data.dataInfo;
          // 拆分得到的字符串结果
          this.arr = this.result1.introduce.split("&");
          this.arr1 = this.result1.advantage.split("&");
          this.arr2 = this.result1.showImage.split(";");
          this.arr3 = this.result1.showContent.split(";");
        });
    },
    mouseover(){
      this.lihover = true;
    },
    mouseout(){
      this.lihover = false;
    }
  },
  mounted() {
    //   从路由进入
    if (this.$route.query.type) {
      //   this.type = this.$route.query.type;
      this.type = "APP效果类";
      // 获取logo
      this.$ajax
        .post(
          this.Ipurl +
            "advertisingInformation/getNamesByType" +
            "?type=" +
            this.type
        )
        .then(res => {
          // 默认读取第一个
          this.result = res.data.dataInfo;
          this.liLength = 1200 / this.result.length;
          //   this.id = this.result[0].id;
          this.id = this.$route.query.id;
          for (let i = 0; i < this.result.length; i++) {
            if (this.result[i].id == this.id) {
              {
                this.liIndex = i;
                this.bgWhitestyle.width = this.liLength + "px";
                this.bgWhitestyle.left =
                  (document.body.clientWidth - 1200) / 2 +
                  this.liLength * this.liIndex +
                  "px";
              }
            }
          }
          this.$ajax
            .post(
              this.Ipurl + "advertisingInformation/queryById" + "?id=" + this.id
            )
            .then(res => {
              this.result1 = res.data.dataInfo;
              // 拆分得到的字符串结果
              this.arr = this.result1.introduce.split("&");
              this.arr1 = this.result1.advantage.split("&");
              this.arr2 = this.result1.showImage.split(";");
              this.arr3 = this.result1.showContent.split(";");
            });
        });
    } else {
      // 默认读取第一个logoid
      this.type = "APP效果类";
      //   默认读取type为效果类
      this.$ajax
        .post(
          this.Ipurl +
            "advertisingInformation/getNamesByType" +
            "?type=" +
            this.type
        )
        .then(res => {
          // 默认读取第一个
          this.result = res.data.dataInfo;
          // 判断有取出来有多少个li
          this.liLength = 1200 / this.result.length;
          this.id = this.result[0].id;
          this.bgWhitestyle.width = this.liLength + "px";
          this.bgWhitestyle.left =
            (document.body.clientWidth - 1200) / 2 +
            this.liLength * this.liIndex +
            "px";
          this.$ajax
            .post(
              this.Ipurl + "advertisingInformation/queryById" + "?id=" + this.id
            )
            .then(res => {
              this.result1 = res.data.dataInfo;
              // 拆分得到的字符串结果
              this.arr = this.result1.introduce.split("&");
              this.arr1 = this.result1.advantage.split("&");
              this.arr2 = this.result1.showImage.split(";");
              this.arr3 = this.result1.showContent.split(";");
            });
        });
    }
  }
};
</script>

<style scoped>
.list {
  overflow: hidden;
}
.list > li {
  float: left;
  height: 150px;
  text-align: center;
  line-height: 150px;
  cursor: pointer;
}
.bgGray {
  background: #f8f9fd;
}
.bgWhite {
  background: #fff;
}
.commonP {
  font-size: 24px;
  font-weight: bold;
  margin-top: 40px;
  margin-left: 60px;
}
.shuxiang {
  width: 100%;
  margin-top: 40px;
}
.hengxiang {
  width: 50%;
  margin-top: 40px;
  float: left;
}
.commonP1 {
  margin-left: 60px;
  font-size: 18px;
}
.content-warp{
  position: relative;
  padding:7px;
}
.content2 {
  background: #fff;
  margin-top: 30px;
  overflow: hidden;
  box-shadow:2px 2px 20px #EBEBEB;
}
.content-style{
  background:#f8f9fd;
   box-shadow:none;
   margin-top:30px;
}
.content3 {
  margin-top: 40px;
  overflow: hidden;
}
.content3 li {
  width: 390px;
  text-align: center;
  float: left;
}
.content3 li p {
  font-size: 16px;
  margin-top: 20px;
  font-weight: bold;
  margin-bottom: 40px;
}
.container4 {
  background: #f8f9fd;
  margin-top: 30px;
  overflow: hidden;
}
.container4 p {
  font-size: 24px;
  font-weight: bold;
  margin-top: 40px;
  margin-left: 60px;
  margin-bottom: 40px;
}
.container4 p:nth-child(2) {
  font-size: 18px;
  font-weight: normal;
}
.container4 p:nth-child(2) span {
  margin-left: 10px;
}

.content2 li:last-child {
  margin-bottom: 40px;
}
.content2 li p span {
  margin-left: 10px;
}
.container5 {
  margin-top: 60px;
  text-align: center;
  margin-bottom: 80px;
}
.container5 > button {
  width: 180px;
  height: 40px;
  border-radius: 25px;
  background: rgb(237, 64, 64);
  color: #fff;
}

.commonSpan  {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding-right: 35px;
  margin-left: 0;
}

.resource {
  background: url('../../assets/img/APP矩阵详情页/切图通用/64.png') no-repeat;
  vertical-align: -13%;
}
.advantage {
  background: url('../../assets/img/APP矩阵详情页/切图通用/65.png') no-repeat;
  vertical-align: -13%;
}
.show-presentation {
  background: url('../../assets/img/APP矩阵详情页/切图通用/66.png') no-repeat;
  vertical-align: -11%;
}
.sale-presentation {
  background: url('../../assets/img/APP矩阵详情页/切图通用/67.png') no-repeat;
  vertical-align: -5%;
}

.lihover:hover {
  background-color: #fff;
  opacity: 0.5;
}
</style>


